<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>


    <iframe id="data" style="display: none;" src="http://wsz.pdmreader.com/home_report.json" frameborder="0"></iframe>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script src="./js/getdata.js"></script>
    <script src="./data/echarts-option-data.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main'));
        // var option = {
        //     color: [
        //         '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
        //         '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
        //         '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
        //     ],
        //     title: {
        //         text: '当前迭代周期各项目组任务所占比',
        //         subtext: '统计',
        //         x: 'center'
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //         formatter: "{a} <br/>{b} : {c} ({d}%)"
        //     },
        //     legend: {
        //         orient: 'vertical',
        //         x: 'left',
        //         data: Datas.getNameArr()
        //     },
        //     toolbox: {
        //         show: true,
        //         feature: {
        //             mark: {
        //                 show: true
        //             },
        //             dataView: {
        //                 show: true,
        //                 readOnly: false
        //             },
        //             magicType: {
        //                 show: true,
        //                 type: ['pie', 'funnel'],
        //                 option: {
        //                     funnel: {
        //                         x: '25%',
        //                         width: '50%',
        //                         funnelAlign: 'left',
        //                         max: 1548
        //                     }
        //                 }
        //             },
        //             restore: {
        //                 show: true
        //             },
        //             saveAsImage: {
        //                 show: true
        //             }
        //         }
        //     },
        //     calculable: true,
        //     series: [{
        //         name: '访问来源',
        //         type: 'pie',
        //         radius: '55%',
        //         center: ['50%', '60%'],
        //         data: Datas.getDataNum()
        //     }]
        // };
        // // 为echarts对象加载数据 
        var option = EOption.yuan(Datas.getNameArr(), Datas.getDataNum(), '各项目组任务版中存在的任务占比', '任务数');
        myChart.setOption(option);

        window.onload = function() {

            Datas.update(function() {
                option.legend.data = Datas.getNameArr();
                option.series[0].data = Datas.getDataNum();
                myChart.setOption(option);
            });
        }
    </script>
</body>